<!DOCTYPE html>
<html>
    <head>
        <title>请假</title>
        <meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="font.css" rel="stylesheet" type="text/css" />
		<link href="../css/mui.min.css" rel="stylesheet" type="text/css"/>
        <style>
		input{
			width: auto;
			height: 1rem;
			display: inline-block;
		}
            h4{
			font-size: 1rem;
            text-align: center;
            font-family:"微软雅黑",times,serif;
            font-weight: normal;
            margin-bottom: 0.15em;
            padding-bottom: 0.15em;
            }
            div.main{
                font-family: "微软雅黑";
                text-indent:32px;
                font-size: 14px;
            }
            a{
                color: deepskyblue;
                font-size: 14px;
                font-weight:500;
            }
            h6{
                font-weight: normal;
                text-indent: 24px;
                font-size: 13px;
                color: gray;
				line-height: 1rem;
            }
            div.top{
                background-image: linear-gradient(to right,#56d0ff,#3584fa);
                border-radius: 5px;
                font-size: 14px;
                color: white;
                padding: 0.7em;
                text-align: center;
                margin-bottom: 0.8em;
            }
            div.list{
                width: 82%;
                position: relative;
                left:10%;
                background-color: white;
				border-bottom:1px #d6d6d6 solid ;
                /* border: 1px #d6d6d6 solid; */
                padding: 0.8em;
                line-height: 1.25em;
                font-size: 12px;
            }
            span.gray{
                font-size: 10px;
                color: #6d6d6d;
            }
            div.yellow{
                display: inline-block;
                text-align: center;
                background: #f7bd37;
                color: white;
                font-size: 14px;
                padding: 0.6em 3em;
                border-radius: 3px;
                position: relative;
            }
            .contain{
                width: 100%;
                height: 100%;
                text-align: center;
            }
        </style>
		<script src="../js/mui.min.js"></script>
    </head>
    <body bgcolor="#f6f6f6">
		<header class="mui-bar mui-bar-nav" style="background-color: #FFFFFF;">
			<a id="icon-menu" class="mui-action-back mui-icon mui-icon-closeempty mui-pull-left" style="color: gray;font-size: 2.5rem;margin-top: -0.6rem;"></a>
			<h1 class="mui-title">待销假详情</h1>
		</header>
		<br />
		<br />
        <body style="margin-left: 3%;margin-right: 3%;color: #606060;font-size: 14px;margin-top: 0.5rem;">
            <div class="contain" id='temp'>
                <form action="test.html" method="POST">
                    姓名：<input type="text" id="name"> <br>
                    班级：<input type="text" id="class0"> <br>
                    辅导员姓名：<input type="text" id="teacher"> <br>
                    电话：<input type="text" id="tel"> <br>
					地址：<input type="text" id="address-input" /><br />
					开始日期：<input type="date" id="begin-data-input" /><br />
					开始时间：<input type="time" id="begin-time-input"/><br />
					周几：
					<select id="begin-day-input">
						<option>周一</option>
						<option>周二</option>
						<option>周三</option>
						<option>周四</option>
						<option>周五</option>
						<option>周六</option>
						<option>周日</option>
					</select><br />
					结束日期：<input type="date" id="end-data-input" /><br />
					结束时间：<input type="time" id="begin-time-input"/><br />
					周几：
					<select id="end-day-input">
						<option>周一</option>
						<option>周二</option>
						<option>周三</option>
						<option>周四</option>
						<option>周五</option>
						<option>周六</option>
						<option>周日</option>
					</select><br />
                    <input type="button" onclick=change() value="提交" style="height: 2rem;">
                </form>
                <p>本页用HTML与JS写成，并使用5+APP开发安卓版本，源码见GITHUB与GITEE。
                    如果校园集结号更新，本页（大概）会紧随推进更新版本。
                </p>
            </div>
            <script src="form.js"></script>
        </body>
        <div class="top">请假申请已被批准通过，请结束后完成销假</div>
        <div style="position:absolute;text-align: center;float: left;width: 10%;">
            <div style="color:#d6d6d6;font-size: 17px">●</div>
            <div style="color:#d6d6d6;font-size: 17px;margin: -0.5em">|</div>
            <div style="color:#d6d6d6;font-size: 17px;margin: -0.5em">|</div>
            <div style="color:#d6d6d6;font-size: 17px;margin: -0.5em">|</div>
            <div style="color:#d6d6d6;font-size: 17px">●</div>
            <div style="color:#d6d6d6;font-size: 17px;margin: -0.55em">|</div>
            <div style="color:#d6d6d6;font-size: 17px;margin: -0.55em">|</div>
            <div style="color:#d6d6d6;font-size: 17px;margin: -0.55em">|</div>
            <div style="color:#d6d6d6;font-size: 17px;margin: -0.55em">|</div>
            <div style="color:#46a1fa;font-size: 17px">●</div>
        </div>
        <div class="list">
            <span class="gray">学生</span>
            <br>
            <span id="name1"></span>&nbsp;申请请假
            <span class="gray" style="position: absolute;right:3em"><span id="data1"></span> &nbsp;19:45</span>
            <div style="position: absolute;right: 5px;bottom:15px;float:right;"><img src="right.png" width="18px" height="18px"></div>
        </div>
        <div class="list">
            <span class="gray">辅导员</span>
            <br>
            <span id="teacher1"></span>&nbsp;审批请假
            <span class="gray" style="position: absolute;right:3em;"><span id="data2"></span> &nbsp;20:20</span>
            <div style="position: absolute;right: 5px;bottom:15px;float:right;"><img src="right.png" width="18px" height="18px"></div>
        </div>
        <div class="list">
            <span class="gray">学生</span>
            <br>
            <span id="name2"></span>&nbsp;销假申请
        </div>
		<br />
        <main style="background-color:white;margin-bottom: 0.5em;margin-top: -0.4em;padding: 0.5rem;">
			<h4>请假申请</h4>
			尊敬的老师：
			<br>
			<br/>
			<div class='main'>本人<a>
				<span id="class1">16软工BD01</span>
				<span id="name0">张某某</span>
				</a>因<a>前往校外去处理事务</a>，需请<a>事假</a>，从<a>
				<span id="time1"></span>
				</a> 至<a>
				<span id="time2"></span>
				</a> ，不能参加累计<a>3</a>节课程的学习。
			</div>
			<div class="main">
				请假期间，本人将去往<a>校外</a>，详细地址为：<a id="address">某某区</a>，
				联系人<a>父亲</a>，联系电话<a style='text-decoration: underline'>
				<span id="tel1"></span>
				</a> 。
			</div>
			<h6 style="margin-top:7px;">本人已签署<a style="font-size: 14px;text-decoration: underline;">承诺书</a>，承诺请假期间严格遵守国家法律法规和校规校纪相关规定，
			不参加任何非法游行、集会活动，一切安全事故责任自负，按时返校销假，
			请准假！
			</h6>
			<div>
				<span class="emoji" id="name3">测试</span>
			</div>
			<br />
        </main>
		<br />
        <div class="yellow" style="left:10%;right: 5px">申请续假</div>
        <div class="yellow" style="left:10%;">申请销假</div>
		<br />
		<p></p>
    </body>
</html>
